<template>
	<view class="form">
		<view class="opt">
			<input v-model="user.email" type="text" placeholder="请输入账号" class="inp">
		</view>
		
		<view class="opt">
			<input v-model="user.password" type="password" placeholder="请输入密码"  class="inp">
		</view>
		
		<view class="opt opt-1">
			 <view class="left">
				 <checkbox-group  >
				 	<label v-if="isAgree">
				 		<checkbox @click="changeCheckBox"  value="cb" checked="true" />
				 	</label>
				 	<label v-else>
				 		<checkbox @click="changeCheckBox"  value="cb" />
				 	</label>
				 </checkbox-group>
			 </view>
			 <view class="right">
				 我已阅读并同意<text class="txt">《服务协议》</text>和<text class="txt">《隐私协议》</text>
			 </view>
		</view>
		
		<view class="opt">
			<!--  @click="submit" 绑定点击行为 -->
			<button class="btn" @click="submit">登录</button>
		</view>
		
		<view class="opt">
			<navigator 
			url="/pages/forgetpwd/forgetpwd" 
			class="forgetpwd">忘记密码?</navigator>
		</view>
		
		<view class="opt opt-2">
			<text class="tips">未有账号,</text><navigator url="/pages/register/register" class="link">立即注册</navigator>
		</view>
		
		
	</view>
</template>
<script setup>
	// 导入vue相关的函数
	import {
		reactive
	} from 'vue';
	
	// 导入用户集合的引用
	import { usersCollection } from '../../common/db/index.js'
	
	
	// 利用reactive函数实现数据响应式
	let user = reactive({
		email: "",
		password: ""
	})
	
	// 定义布尔值（判断用户是否阅读并同意服务协议等）
	let isAgree = false;
	
	
	// 登录方法
	const loginFn = async ()=> {
		// console.log("提示：登录")
		// 后续要在此处编写登录的业务逻辑
		// 采集表单信息
		//  let  对象  = 对象;  // ES6 解构赋值
		let  {email , password} = user;
		console.log({email , password})
		
		// 判断用户输入框是否有值
		// 判断用户邮箱是否为空
		if(email == "" || password == "") {
			uni.showToast({
				title:"输入框不能为空~~",
				icon: "none"
			})
			return false;
		}
		
		// 判断邮箱格式是否正确
		if(!/\w{5,}@qq\.com$/.test(email)){
			uni.showToast({
				title:"请输入正确的qq邮箱",
				icon: "none"
			})
			return false;
		}
		
		// 判断用户是否勾选阅读并同意平台协议
		if(!isAgree) {
			uni.showToast({
				title:"请阅读并勾选平台协议~",
				icon: "none"
			})
			return false;
		}
		
		
		// 调用API访问云数据库是否存在这个账户
		await usersCollection.where({email: email,password:password})
		.get()
		.then(
			res=> {
				let result = res.result;
				console.log("查询的结果:",result)
				if(result.data.length === 1) {
					// 提示
					uni.showToast({
						title:"登录成功",
						icon:"success"
					})
					
					// 取值
					let data = result.data;
					let zsstb_id = data[0]._id;
					// 把用户身份存储在本地（以后可以改用token）
					uni.setStorageSync("ZSSTB_ID", zsstb_id);
					
					// 延迟300毫秒跳转个人中心
					setTimeout(()=>{
						// 点击跳转
						uni.redirectTo({
							url:"/pages/my/my"
						})
					},300)
				}
				else {
					uni.showToast({
						title:"账号或密码错误",
						icon:"error"
					})
				}
			}
		)
		
		
		
	}
	
	// 执行登录方法（页面没有出现返回上一级按钮）
	const submit = ()=> loginFn();
	
	
	
	// 设置复选框的布尔值
	const changeCheckBox = (event)=> {
		// console.log(isAgree)
		if(isAgree) {
			isAgree = false;
		}
		else {
			isAgree = true;
		}
	}
	
</script>




<style lang="scss">
@import '../../uni.scss';
.form {
	width: 100%;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	.opt {
		width: 100%;
		margin-top: 30rpx;
		.forgetpwd {
			color: $active_color;
		}
		.inp {
			height: 90rpx;
			width: 100%;
			border: 1px solid #ccc;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
		}
		.btn {
			background-color: $bg_btn_color;
			color: #fff;
		}
		.cbx {
			width: 30rpx;
			height: 30rpx;
		}
		.txt {
			font-size: 30rpx;
			color: #ff5500;
		}
	}
	.opt-1 {
		display: flex;
		align-items: center;
		.left {
			width: 40rpx;
		}
		.right {
			width: calc(100% -  40rpx);
			margin-left: 20rpx;
			font-size: 30rpx;
		}
	}
	.opt-2 {
		.tips {
			float: left;
			color: #666;
		}
		.link {
			float: left;
			margin-left: 30rpx;
		}
	}
}
</style>
